<template>
	<view class="pd-30" v-if="Object.keys(detail).length > 0">
		<navHead :datas="headData"></navHead>
		<view class="progress_box bd-r40 pd-20">
			<view class="progress_bar_box">
				<view class="progress_bar_item flex-bwt">
					<view class="item " v-for="(item, index) of detail.progress" :key="index"
						:style="{ flex: index < detail.progress.length - 1 ? 1 : 0 }">
						<view class="flex-center">
							<view class="icon" :class="{ active: item.is_active == 1 }">
							</view>
							<view class="solid ml-10 mr-10" v-if="index < detail.progress.length - 1"
								:class="{ solitActive: item.is_active == 1 }">
							</view>
						</view>
					</view>
				</view>
				<view class="progress_bar_text flex-bwt mt-10">
					<view class="item " v-for="(item, index) of detail.progress" :key="item">
						<view class="text c-99 ft-24" :class="{ active: item.is_active == 1 }">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<view class="status-box mt-20 pd-20">
				<view class="flex">
					<image class="wh-22 mr-10" src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon.png">
					</image>
					<view class="ft-22 c-66">
						<view v-html="detail.progress_txt"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-box mt-20 pd-20">
			<view class="ft-28 c-33 fw-800">订单进度</view>
			<view class="main pd-20 mt-20">
				<view class="progress-item" v-for="(item, index) in detail.list" :key="index">
					<view class="flex-bwt">
						<view class="l flex">
							<view class="radius flex-center mr-8" :class="{ active: index == 0 }">
								<view class="c"></view>
							</view>
							<view class="ft fw-800">{{ item.name }}</view>
						</view>
						<view class="ft-22 c-99">{{ item.created_at }}</view>
					</view>
					<view class="b flex" :class="{ active: index < detail.list.length - 1 }">
						<view style="width: 20rpx;">
							<view class="line" v-if="index < detail.list.length - 1"></view>
						</view>
						<view class="c-box">
							<view class="txt ft-22 c-66 mt-10 ml-10">{{ item.content }}</view>
							<view class="img-list flex-start" v-if="item.images && item.images.length > 0">
								<image class="img mt-10" v-for="(v, k) in item.images" :key="k" :src="v"
									mode="aspectFill"></image>
							</view>
							<view class="file-list" v-if="item.files && item.files.length > 0">
								<view class="file-item flex mt-10 pd-10" style="align-items: flex-start;"
									v-for="(v, k) in item.files" :key="k">
									<image class="wh-24 mr-10" style="flex-shrink: 0;"
										src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon6.png"></image>
									<view class="ft-22 c-66">{{ v.origin_name }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 68rpx;"></view>
	</view>
</template>

<script setup lang="js">
import {
	reactive,
	ref
} from 'vue';
import navHead from '@/components/navHead.vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad
} from "@dcloudio/uni-app";
const headData = reactive({
	color: '#fff',
	title: '订单进度'
})

const detail = ref({})
const orderId = ref('')
onLoad((options) => {
	orderId.value = options?.order_id || ''
	utils
		.request(
			api.getOrderProgress, {
			id: orderId.value
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data
		});
})

</script>

<style lang="scss" scoped>
.progress_box {
	background-color: #F8F8F8;

	.progress_bar_box {
		.progress_bar_text {
			.item {
				min-width: 100rpx;
				text-align: center;
			}

			.active {
				color: #333;
				font-weight: 800;
			}
		}

		.progress_bar_item {
			padding: 0 40rpx;

			.item {
				// display: flex;
				// background-color: red;

				// flex: 1;
				.icon {
					width: 16rpx;
					height: 16rpx;
					background-color: #333;
					border-radius: 50%;
				}

				.active {
					background-color: #DBF046;
					border: 6rpx solid #333;
				}

				.solid {
					// width: 228rpx;
					flex: 1;
					height: 2rpx;
					background-color: #F1F1F1;
				}

				.solitActive {
					background-color: #333;

				}
			}
		}
	}

	.status-box {
		width: 650rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 20rpx;
	}
}

.list-box {
	width: 690rpx;
	background: #F8F8F8;
	border-radius: 40rpx;

	.main {
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.progress-item {
			.radius {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;

				.c {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #333333;
				}
			}

			.radius.active {
				background-color: #333333;

				.c {
					width: 12rpx;
					height: 12rpx;
					background: #DBF046;
				}
			}

			.b {
				align-items: stretch;

				.line {
					width: 2rpx;
					height: 100%;
					background-color: #F1F1F1;
					margin-left: 8rpx;
					margin-right: 8rpx;
				}
			}

			.b.active {
				.c-box {
					padding-bottom: 40rpx;
				}
			}

			.img-list {
				width: 630rpx;
				margin-left: 10rpx;

				.img {
					width: 100rpx;
					height: 128rpx;
					margin-right: 20rpx;
				}
			}

			.file-list {
				margin-left: 10rpx;
				margin-top: 4rpx;

				.file-item {
					width: 584rpx;
					background: #F8F8F8;
					border-radius: 12rpx;
				}
			}
		}
	}
}
</style>